<template>
  <div>
    <div class="goods-list">
      <ul>
        <li v-for="item in goosListData" :key="item.id">
          <router-link   :to="{name:'goodInfo', params: { id: item.id }}" class="goods_content"  >
            <div class="goods-img">
              <img :src="item.pic">
            </div> 
            <div class="goods-title">
              <dl>
                <dt>{{item.goods_name}}</dt>
                <dd>
                  <a>
                    ￥{{item.price_after_coupons}}
                    <!-- <del>￥{{ item.price }}</del> -->
                  </a>
                  <span>已销售{{item.sales}}件</span>
                </dd>
              </dl>
            </div>
          </router-link>
        </li>
      </ul>
    </div>


   
  </div>
</template>
<script>
import { Indicator } from 'mint-ui';

export default {
  data() {
    return {
      goosListData: [],
      goodsApi:
        "/goods/getGoodsLink?appkey=0df6290cb148cace89f7df5064fc105e&type=top100&page=1"
    };
  },
  methods: {
    getgoods: function(goodsApi) {
        Indicator.open({
        spinnerType: 'triple-bounce'
      });
      //获取商品
      this.axios
        .get(goodsApi)
        .then(result => {
          if (result.status === 200) {
            this.goosListData = result.data.data;
             Indicator.close();
          }
        })
        .catch(function(error) {
          Toast({
            message: "网络延迟",
            position: "bottom",
            duration: 5000
          });
           Indicator.close();
        });
       
    }
    
  },
  created() {
    this.getgoods(this.goodsApi);
  }
};
</script>
<style lang="scss" scoped>
.goods-list {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49%;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 20px;
      .goods_content{
          width: 100%;
          height: 100%;
          .goods-img {
        width: 100%;
        height: 190px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .goods-title {
        padding-top: 10px;
        dl {
          width: 90%;
          margin: 0 auto !important;
          dt {
            width: 100%;
            font-size: 14px;
            color: #010101;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          dd {
            width: 100%;
            padding: 10px 0px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-content: flex-end;
            a {
              font-size: 14px;
              color: #fb303f;
              font-weight: bold;
              del {
                font-size: 12px;
                color: #979797;
                margin-left: 5px;
              }
            }
            span {
              font-size: 12px;
              color: #8f8f8f !important;
            }
          }
        }
      }
      }
     
    }
  }
}
</style>

